<template>
	<view class="header">
		<!-- 列表 -->
		<view v-for="(item,index) in carlist" :key='index'>
			<view class="list">

				<view class="list-item">

					<!-- 标题 -->
					<view class="list-nav flex flex-jc-sb flex-ai-c">
						<!-- 左边 -->
						<view class="list-item-left flex flex-ai-c">
							<view class="img">
								<image :src="item.brand_Name_img+'!idx'" mode="aspectFit"></image>
							</view>
							<view>{{item.brand_Name}}</view>
						</view>
						<!-- 右边 -->
						<view class="list-item-right" @click="goPage(item)">
							进店
						</view>
					</view>

					<!-- 列表数据 -->
					<scroll-view scroll-x>
						<view class="list-main flex">
							<view v-for="item1 in item.carLsit" :key='item1.id' style="margin-right: 20rpx;" @click="details(item1)">
								<view class="list-main-img">
									<image :src="item1.goodImg+'!idx'"></image>
								</view>
								<view class="list-main-title">{{item1.car_Type_Name}}</view>
								<view v-if="!item1.loans">
									<view class="list-main-yue">月供<text style="font-weight: bold;font-size: 28rpx;">{{item1.monthlyPayments | million}}</text></view>
									<view class="list-main-shou">首付<text>{{item1.downPayment | million}}</text></view>
								</view>
								<view v-else>
									<view class="flex list-main-yue">
										<view style="color: #999999;text-decoration: line-through;">{{item1.factory_Price}}</view>
										<u-icon name="arrow-downward" color="#38AA0B"></u-icon>
										<view style="color: #38AA0B;overflow: hidden;text-overflow: ellipsis;font-weight: bold;font-size: 28rpx;">{{item1.difference.charAt(0)!=='-'?item1.difference:0}}</view>
									</view>
									<view class="list-main-shou">裸车价<text>{{item1.client_Price}}</text></view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			carlist: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		},
		watch: {
			carlist(val) {
				
			}
		},
		filters: {
		  million(value) { //过万处理
		  	let num
		  	if (value > 9999) { //大于9999显示x.xx万
		  		num = ((value / 1000) / 10).toFixed(2) + '万'
		  	} else if (value <= 9999 && value >= -9999) {
		  		num = value + '元'
		  	} else if (value < -9999) { //小于-9999显示-x.xx万
		  		num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
		  	}
		  	return num
		  }
		},
		methods: {
			details(item){
				
				if(item.loans){
					uni.navigateTo({
						url: '/pages_commodity/giantnengjiangDetails/giantnengjiangDetails?goodid=' + item.id
					})
				}else {
					uni.navigateTo({
						url: '/pages_commodity/sourceDetails/sourceDetails?goodid=' + item.id
					})
				}
			},
			goPage(item) {
				console.log(item)
				let list = {
					brandId:item.brand_Id,
					brandName:item.brand_Name,
					brandImg:item.brand_Name_img
				}
				let data = JSON.stringify(list)
				console.log(data)
				
				uni.navigateTo({
					url:'/pages_buy_index/store/store?list='+encodeURI(data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.header {
		height: 100%;
		background-color: rgb(246,246,246);

		// 列表
		.list {
			padding: 20rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 702rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;

			&-nav {
				border-bottom: 2rpx solid #EEEEEE;
				padding-bottom: 20rpx;
			}

			// 列表内容
			&-item {


				// 左边
				&-left {

					// 品牌图
					.img {
						margin-right: 20rpx;
						width: 50rpx;
						height: 50rpx;
						border-radius: 5rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				// 标题右边
				&-right {
					width: 140rpx;
					height: 56rpx;
					background: linear-gradient(0deg, #FBD220, #FFE23E);
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
				}

			}

			&-main {
				padding: 20rpx 0;


				&-img {
					// margin: 0 auto;
					width: 208rpx;
					height: 144rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&-title {
					width: 208rpx;
					text-align: center;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 26rpx;
					font-weight: 500;
					color: #343434;
				}

				&-yue {
					width: 208rpx;
					font-size: 20rpx;
					text-align: center;
					font-weight: 500;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #FC4040;
				}

				&-shou {
					width: 208rpx;
					font-size: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					text-align: center;
					color: #FC4040;

					text {
						font-weight: bold;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
